import { useRequest, useSearch } from '@/hooks'
import { clone, equals, isEmpty, isNil, map } from 'ramda'
import { computed, defineComponent, onMounted, ref, toRaw } from 'vue'
import { CalendarOutlined, CommentOutlined, UserOutlined, FolderOpenOutlined, EyeOutlined } from '@ant-design/icons-vue'
import { formatTime } from '@/utils'
import './style.scss'
import { ArticleModule } from '@/store/modules/articleData'
import { useRouter } from 'vue-router'
import { scrollTo } from '@/utils/scroll-to'
import { Article } from '@/interface'
import GrowingUp from '@/components/growingUp'
export default defineComponent({
	name: 'Article',
	setup() {
		const router = useRouter()
		onMounted(() => {
			if (isEmpty(ArticleModule.articleCategory)) {
				ArticleModule.getArticleCategory()
			}
			if (isEmpty(ArticleModule.articleTag)) {
				ArticleModule.getArticleTag()
			}
			if (isEmpty(ArticleModule.articleLately)) {
				ArticleModule.getArticleLately()
			}
		})
		/** 分类 */
		const category = computed(() => {
			return ArticleModule.articleCategory
		})
		/** 标签 */
		const tagList = computed(() => {
			return ArticleModule.articleTag
		})
		/** 最新文章 */
		const lately = computed(() => {
			return ArticleModule.articleLately
		})
		const pageState = ref({
			navCategory: '首页',
			labelValue: '',
			searchValue: '',
		})
		const { searchForm } = useSearch<API.blog.article.getArticlePage.Params>({})
		const { run, data, getPagination, renderPagination, loading } = useRequest(
			API.blog.article.getArticlePage.request,
			{
				manual: true,
				pagination: true,
				defaultParams: [
					{
						status: 1,
					},
				],
			}
		)
		function search() {
			scrollTo(0)
			const params = clone(toRaw(searchForm.value))
			data.value = []
			params.category = equals(pageState.value.navCategory, '首页') ? undefined : pageState.value.navCategory
			params.tags = pageState.value.labelValue
			params.title = pageState.value.searchValue
			const datas = {
				...getPagination(true),
				...params,
				status: 1,
			}
			run(datas)
		}
		function JumpCategory(value: string) {
			if (loading.value || equals(pageState.value.navCategory, value)) return
			pageState.value.navCategory = value
			search()
		}
		function toBlog(id: number) {
			const query: any = {}
			if (!equals(pageState.value.navCategory, '首页')) {
				query.category = pageState.value.navCategory
			}
			console.log(router)

			router.push({
				path: `/articleDetails/${id}`,
				query,
			})
		}
		return () => (
			<div id="article" class="conWidth">
				<aside>
					<div>
						<h3>搜索</h3>
						<div class="search-box">
							<a-input-search
								v-model={[pageState.value.searchValue, 'value']}
								placeholder="请输入关键词"
								enter-button
								onSearch={search}
							/>
						</div>
					</div>
					<div>
						<h3>分类</h3>
						<ul>
							<li
								class={equals(pageState.value.navCategory, '首页') ? 'active' : ''}
								onClick={() => {
									JumpCategory('首页')
								}}
							>
								<a>首页</a>
							</li>
							{map(
								(item) => (
									<li
										class={equals(pageState.value.navCategory, item.label) ? 'active' : ''}
										onClick={() => {
											JumpCategory(item.label)
										}}
									>
										<a>{item.label}</a>
									</li>
								),
								category.value
							)}
						</ul>
					</div>
					<div>
						<h3>最新文章</h3>
						<ul>
							{map(
								(item) => (
									<li
										onClick={() => {
											toBlog(item.value as number)
										}}
									>
										<a href="#" class="one-hidden">
											{item.label}
										</a>
									</li>
								),
								lately.value
							)}
						</ul>
						{isEmpty(lately.value) && (
							<div style="text-align: center;margin: 10px auto ;padding:10px 0">
								<a-empty />
							</div>
						)}
					</div>
					<div class="label-box">
						<h3>标签</h3>
						<div>
							{map(
								(item) => (
									<span
										class={[equals(pageState.value.labelValue, item.label) ? 'active' : '']}
										onClick={() => {
											pageState.value.labelValue = equals(pageState.value.labelValue, item.label) ? '' : item.label
											search()
										}}
									>
										{item.label}
									</span>
								),
								tagList.value
							)}
						</div>
					</div>
				</aside>
				<article>
					<div class="article-box">
						{!loading.value && isEmpty(data.value.data?.data) && (
							<div style="text-align: center;margin: 200px auto ;">
								<a-empty />
							</div>
						)}
						{loading.value && (
							<div class="skeleton">
								<a-skeleton active />
								<a-skeleton active />
							</div>
						)}
						{map((item) => {
							return (
								<div class="article">
									<h3 class="two-hidden">{item.title}</h3>
									<div class="article-message">
										<div class="date">
											<CalendarOutlined />
											{formatTime(item.createDate as string)}
										</div>
										<div class="comment">
											<CommentOutlined />
											{item.comment}条评论
										</div>
										<div class="username">
											<UserOutlined />
											发布者：<span>{item.user?.username}</span>
										</div>
										<div class="tags">
											<FolderOpenOutlined />
											{item.tags?.join('，')}
										</div>
										<div class="category flexBox">
											<EyeOutlined />
											<span>{item.read}</span>
										</div>
									</div>
									<div class="content-box">
										<p class="two-hidden">{item.content}</p>
										{!isNil(item.imageUrl) && !isEmpty(item.imageUrl) && (
											<div class="image-box flexBox">
												<img src={item.imageUrl} alt="" />
											</div>
										)}
									</div>
									<div>
										<a-button onClick={() => toBlog(item.id as number)}>阅读全文</a-button>
									</div>
								</div>
							)
						}, (data.value.data?.data ?? []) as Article[])}
					</div>
					{!loading.value && !isEmpty(data.value.data?.data) && (
						<div style="margin: 20px 0; text-align: center;">{renderPagination()}</div>
					)}
				</article>
				<GrowingUp />
			</div>
		)
	},
})
